<template>
  <div class="card" style="max-width: 420px; margin: 0 auto">
    <h2 style="margin-top: 0">登录</h2>
    <p style="color: #475569">登录后可维护 {{ moduleDisplayName }} 数据，请在后端实现真实认证。</p>
    <form @submit.prevent="handleSubmit">
      <div class="form-field">
        <label for="username">用户名</label>
        <input id="username" v-model="form.username" placeholder="输入用户名" required />
      </div>
      <div class="form-field">
        <label for="password">密码</label>
        <input id="password" v-model="form.password" type="password" placeholder="输入密码" required />
      </div>
      <div v-if="error" style="color: #ef4444">{{ error }}</div>
      <button type="submit" :disabled="loading">{{ loading ? '登录中...' : '登录' }}</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { api } from '../lib/api';
import type { LoginRequest, LoginResponse } from '../types/auth';

const router = useRouter();
const form = reactive<LoginRequest>({ username: '', password: '' });
const loading = ref(false);
const error = ref<string | null>(null);
const moduleDisplayName = '${moduleDisplayName?js_string}';

const handleSubmit = async () => {
  loading.value = true;
  error.value = null;
  try {
    await api.post<LoginResponse>('/auth/login', form);
    router.push('/');
  } catch (err) {
    error.value = err instanceof Error ? err.message : '登录失败，请重试';
  } finally {
    loading.value = false;
  }
};
</script>

